<template>
  <div class="login-container">
    <!-- 背景图片 -->
    <div class="login-bg"></div>

    <!-- 主要内容 -->
    <div class="login-content">
      <!-- 顶部logo -->
      <div class="logo-section">
        <img src="@/assets/images/login-logo.png" alt="logo" class="logo" />
      </div>

      <!-- 标题 -->
      <div class="title-section">
        <h1 class="title">AI智慧教育平台</h1>
      </div>

      <!-- 登录表单 -->
      <div class="form-section">
        <!-- 账户输入框 -->
        <van-cell-group inset class="form-group">
          <van-field
            v-model="username"
            placeholder="输入账户"
            class="input-field"
            :border="false"
          />
        </van-cell-group>

        <!-- 密码输入框 -->
        <van-cell-group inset class="form-group">
          <van-field
            v-model="password"
            type="password"
            placeholder="输入密码"
            class="input-field"
            :border="false"
          />
        </van-cell-group>

        <!-- 登录按钮 -->
        <van-button
          type="primary"
          size="large"
          class="login-btn"
          @click="handleLogin"
        >
          登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      username: "", // 用户名
      password: "", // 密码
      userId: "", // 用户id
    };
  },
  created() {},
  methods: {
    getUserInfo() {
      this.$axios
        .get("/tes/user/info")
        .then((response) => {
          const res = response;
          if (res.code === 200) {
            this.userId = res.data.userId;
            localStorage.setItem("userInfo", JSON.stringify(res.data));

            // 获取 redirect 参数
            const redirectPath = this.$route.query.redirect || "/";
            console.log("Redirecting to:", redirectPath);

            // 跳转到目标页面
            // this.$router.push(redirectPath);
            this.$router.push("/");
          }
        })
        .catch((error) => {});
    },
    handleLogin() {
      // 检查用户名和密码是否为空
      if (!this.username || !this.password) {
        showToast("用户名和密码不能为空");
        return;
      }

      // 使用 this.$axios 发起 POST 请求
      this.$axios
        .post(
          `/tes/unauthorized/form?username=${this.username}&password=${this.password}`
        )
        .then((response) => {
          const res = response; // 获取响应数据

          if (res.code === 200) {
            showToast("登录成功");
            // 登录成功后直接跳转到首页
            this.getUserInfo(); // 获取用户信息
          } else if (res.code === 10001) {
            showToast(res.msg || "登录失败，请重试");
            // this.getisShowYzm(); // 登录失败时刷新验证码
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/login-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.login-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88px 25px 0;
}

.logo-section {
  margin-bottom: 20px;

  .logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
}

.title-section {
  margin-bottom: 46px;

  .title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin: 0;
  }
}

.form-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .form-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;

    &:last-of-type {
      margin-bottom: 35px;
    }

    .input-field {
      background: white;
      :deep(.van-cell) {
        width: 100%;
      }
      :deep(.van-field__control) {
        font-size: 16px;
      }

      :deep(.van-field__placeholder) {
        color: #a6abb2;
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 18px;
    background: #155eef;
    border: none;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
  }
}

// // 响应式设计
// @media (max-width: 375px) {
//   .login-content {
//     padding: 40px 15px 0;
//   }

//   .title-section .title {
//     font-size: 20px;
//   }

//   .form-section {
//     max-width: 280px;
//   }
// }
</style>
